<template>
  <div class="home-page">
    <!-- 轮播图区域 -->
    <el-carousel indicator-position="outside" :autoplay="true" style="margin-top: 5px;">
      <el-carousel-item v-for="(item, index) in imageList" :key="index">
        <el-image
            style="width: 100%; height: 500px; object-fit: cover;"
            :src="item.imageUrl"
            fit="cover"
        />
      </el-carousel-item>
    </el-carousel>

    <!-- 最近爆火 -->
    <div class="section">
      <h2 class="section-title">最近爆火</h2>
      <div class="dish-list">
        <div v-for="(dish, index) in hotDishes" :key="index" class="dish-card">
          <el-image :src="dish.imageUrl" fit="cover" class="dish-image"/>
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <p>{{ dish.price }}元</p>
            <div class="dish-actions">
              <el-button type="primary" @click="addToCart(dish)">加入购物车</el-button>
              <el-button type="success" @click="order(dish)">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 今日推荐 -->
    <div class="section">
      <h2 class="section-title">今日推荐</h2>
      <div class="dish-list">
        <div v-for="(dish, index) in recommendedDishes" :key="index" class="dish-card">
          <el-image :src="dish.imageUrl" fit="cover" class="dish-image"/>
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <p>{{ dish.price }}元</p>
            <div class="dish-actions">
              <el-button type="primary" @click="addToCart(dish)">加入购物车</el-button>
              <el-button type="success" @click="order(dish)">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新品上市 -->
    <div class="section">
      <h2 class="section-title">新品上市</h2>
      <div class="dish-list">
        <div v-for="(dish, index) in newDishes" :key="index" class="dish-card">
          <el-image :src="dish.imageUrl" fit="cover" class="dish-image"/>
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <p>{{ dish.price }}元</p>
            <div class="dish-actions">
              <el-button type="primary" @click="addToCart(dish)">加入购物车</el-button>
              <el-button type="success" @click="order(dish)">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {apiGet} from '@/utils/api';
import type {Dish} from '@/types/entity';
import { addToCart, order } from '@/utils/cartAndOrder';

// 今日推荐菜品，随机推荐
const recommendedDishes = ref<Dish[]>([]);
// 新品上市菜品
const newDishes = ref<Dish[]>([]);
// 最近爆火菜品
const hotDishes = ref<Dish[]>([]);
// 初始化轮播图图片列表
const imageList = ref<Dish[]>([]);

const getImagesList = async () => {
  let {data} = await apiGet('/dish/getRandom', {limit: 5});
  imageList.value = data;
};

const getHotDishes = async () => {
  let {data} = await apiGet('/dish/getPopular', {limit: 8});
  hotDishes.value = data;
};

const getRandomDishes = async () => {
  let {data} = await apiGet('/dish/getRandom', {limit: 8});
  recommendedDishes.value = data;
};

const getNewDishes = async () => {
  let {data} = await apiGet('/dish/getByCreatedAt', {limit: 8});
  newDishes.value = data;
};
// 组件挂载完毕
onMounted(() => {
  getRandomDishes();
  getNewDishes();
  getHotDishes();
  getImagesList();
});
</script>

<style scoped>
.home-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto; /* 页面内容居中 */
}

.section {
  margin-top: 40px;
  text-align: center; /* 标题居中 */
}

.section-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.dish-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 菜品卡片居中 */
  gap: 20px;
}

.dish-card {
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dish-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dish-image {
  width: 100%;
  height: 150px;
}

.dish-info {
  padding: 15px;
}

.dish-info h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #333;
}

.dish-info p {
  margin: 5px 0;
  font-size: 16px;
  color: #666;
}

.dish-actions {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  justify-content: center; /* 按钮居中 */
  margin-top: 10px; /* 与上方内容的间距 */
}

.el-button {
  flex: 1; /* 按钮平均分配宽度 */
}
</style>